<template>
  <div class="wrong-page-404">
    <div class="top-part">
      <slot name="image">
        <div class="wrong-image" :style="{ backgroundImage: 'url(' + getImage(props.name) + ')' }">
        </div>
      </slot>
    </div>
    <div class="bottom-part">
      <div class="wrong-title">
        <slot name="title">
          <div>页面访问失败！</div>
        </slot>
      </div>
      <!-- <div class="wrong-btn">
        <slot name="button">
          <a href="" class="btn">前往首页</a>
        </slot>
      </div> -->
    </div>
  </div>
</template>

<script lang="ts" setup>

const props = defineProps({
  name: {
    type: String,
    default: '404'
  }
})

/**
* 获images里的图片，传入图片文件名
* @param {String} name 图片文件名
*/
const getImage = (name: string | null) => {
  if (name) {
    return new URL(`../../assets/images/${name}.png`, import.meta.url).href
  }
  return new URL('../../assets/images/404.png', import.meta.url).href
}
</script>

<style scoped>
.wrong-page-404 {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bottom-part .wrong-title {
  margin-top: 10px;
  font-size: 30px;
  /* font-weight: bold; */
  color: #646464;
}

.bottom-part .wrong-content {
  margin-top: 20px;
  font-size: 18px;
  color: #646464;
}

.bottom-part .wrong-btn .btn {
  text-decoration: none;
  display: inline-block;
  padding: 6px 16px;
  font-size: 14px;
  background-color: #409eff;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.bottom-part .wrong-btn .btn:hover {
  background-color: #0077e6;
}

.top-part {
  width: 480px;
  height: 480px;
}

.top-part .wrong-image {
  width: 100%;
  height: 100%;
  /* background: url('@/assets/images/404.png') center no-repeat; */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}
</style>
